import React, {useState} from 'react'
import {WhiteSpace, WingBlank} from "antd-mobile";
import CustomButton from "../../../../../../shared-components/CustomButton/CustomBotton";
import './History.css'
import RecordTable from "../companents/RecordTable/RecordTable";

const History = props => {
    const [sameHomeAway, setSameHomeAway] = useState(false)

    const sameHomeAwayBtn = (
        <CustomButton
            inline='true'
            bg={!sameHomeAway ? 'rgba(51,51,51, 0.1)' : ''}
            size='xs'
            color={!sameHomeAway ? '#333' : ''}
            onClick={() => setSameHomeAway(!sameHomeAway)}
        >同主客</CustomButton>
    )

    const historyTitle = (
        <WingBlank>
            <div className='flex-space-between-align-center'>
                <div className='game-room-analysis-title'>历史交锋</div>
                <div>
                    {sameHomeAwayBtn}
                </div>
            </div>
        </WingBlank>
    )

    const {
        vs,
        teams,
        events,
        currentGame,
    } = props

    // if (vs && vs.length === 0) return <div><p>暂无数据</p></div>

    return <>
        <WhiteSpace/>
        {historyTitle}
        <WhiteSpace/>
        {vs && vs.length === 0
            ? <div
                style={{width: '100%', background: '#fff', textAlign: 'center', padding: '16px'}}
            ><p>暂无数据</p></div>
            : <RecordTable
                type='history'
                recordList={vs}
                icon={true}
                team={currentGame.home_team}
                sameHomeAway={sameHomeAway}
                teams={teams}
                events={events}
                currentGame={currentGame}
            />
        }

        <WhiteSpace/>
    </>

}

export default History
